<template>
  <label
    class="image-uploader"
    :style="{'width':width,'height':height}"
  >
    <input
      ref="picker"
      type="file"
      class="picker"
      :accept="accept"
      @change="handlePick"
    />
    <div class="uploader-body">

      <slot>
        <div class="upload">
          <div class="text">
             {{text}}
          </div>
          <img :src="fileDatas.accessUrl">
        </div>
      </slot>
    </div>
    <PreviewImg ref="PreviewImg" />
  </label>
</template>
<script>
import { upload } from "@/utils/file";
import PreviewImg from "@/components/upload/previewImg";
import { sortJson } from "@/utils/sortJson";
import { signature, verify } from "@/utils/sign";
import qs from "qs";
import md5 from "md5";
export default {
  props: {
    text: {
        type: String,
      default: '更新头像'
    },
    uploadTip: {
      //提示图片
      type: String,
      // default: uploadTip
    },

    fileData: {
      // type: String,
      // default: "",
    },
    ext: {
      type: Array,
      default() {
        return [".PNG", ".png", ".JPG", ".jpg", ".JPEG", ".jpeg"];
      },
    },
    size: {
      // 默认最大图片大小 5M
      type: Number,
      default: 5120,
    },
    width: {
      type: String,
      default: "168px",
    },
    height: {
      type: String,
      default: "168px",
    },
  },
  data() {
    return {
      // fileDatas: null,
    };
  },
  // watch: {
  //   fileData(val) {
  //     this.fileDatas = val;
  //   },
  // },
  components: {
    PreviewImg,
  },
  computed: {
    accept() {
      if (Array.isArray(this.ext)) {
        return this.ext.join(",");
      }
      return "*";
    },

    fileDatas() {
      console.log("接收--------", this.fileData);
      if (this.fileData.url && this.fileData.url != "") {
        return this.fileData;
      } else {
        return {};
      }
    },
  },

  methods: {
    async handleUpload(file) {
      var formData = new FormData();
      let timestamp = new Date().getTime();
      formData.append("file", file);
      formData.append("timestamp", timestamp);
      // let privateKey = this.$storage.get("keyR");
      // let data = {
      //   timestamp: timestamp,
      // };
      // // 请求体排序
      // let sorted = qs.stringify(sortJson(data));
      // sorted = decodeURIComponent(sorted);
      // let mds = md5(sorted);
      // // 加签名
      // let bas = signature(mds.toUpperCase(), privateKey);
      // formData.append("signature", bas);

      upload(formData)
        .then((res) => {
          if (res.code == 0) {
            this.$emit("success", res.data);
          }
        })
        .catch((err) => {
          this.$emit("onError", err);
        });
    },

    makeFIleName(file) {
      const ext = file.name.split(".").pop();
      const date = getFormatDate();
      const rand = randomStr(6);
      const fileName = `${this.path}/${this.uid}_${date}_${rand}.${ext}`;
      return fileName;
    },

    // 用户选中图片后触发
    handlePick(e) {
      const file = e.target.files[0];
      this.name = file.name;
      if (file) {
        this.validate(file);
        e.target.value = "";
      }
    },
    // 文件检测
    async validate(file) {
      const ext = `.${file.name.split(".").pop()}`;
      const filesize = file.size;
      if (!this.ext.includes(ext)) {
        this.$message.info(
          `${this.$t("notice.msg.supportUpload")}${this.accept}${this.$t(
            "notice.msg.formatFile"
          )}`
        );
        return;
      }
      if (filesize / 1024 > this.size) {
        this.$message.info(
          `${this.$t("notice.msg.fileSize")}${this.size / 1024}MB`
        );
        return;
      }
      this.handleUpload(file);
    },
  },
};
</script>
<style lang="less" scoped>
.image-uploader {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 6px 3px #edeef2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  .picker {
    display: none;
    opacity: 0;
  }

  .uploader-body {
    width: 168px;
    box-shadow: 0px 0px 6px 3px #edeef2;
    position: relative;
    img {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      border: 1px solid #e8e7e9;
      // box-shadow: 0px 0px 6px 3px #edeef2;
    }
    .text {
      width: 168px;
      height: 168px;
      // background: rgb(243 ,238, 238, 0.4);
      background: rgba(233, 236, 245, 1);
      border: 4px solid #e9ecf5;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      line-height: 168px;
      font-size: 18px;
      font-weight: 600;
      // color: #fff;
      display: none;
    }
  }
  .uploader-body:hover {
    .text {
      display: block;
    }
  }
}
</style>